<template>
  <div class="user-manage-container">
    <div class="operate-box">
      <ul class="operate-box-left">
        <li>
          <el-select
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <el-input
            v-model="input"
            placeholder="请输入"
          ></el-input>
        </li>
      </ul>
      <div class="operate-box-right">
        <el-button type="primary">新增</el-button>
        <el-button @click="openFn">管理</el-button>
      </div>
    </div>

    <div class="data-table-box">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色类型"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
        >
        </el-table-column>
        <el-table-column
          prop="other"
          label="其它"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button
              class="edit-btn"
              type="text"
            >编辑</el-button>
            <el-button
              class="delete-btn"
              type="text"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-box">
        <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserManage',
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '选项1'
        },
        {
          value: '选项2',
          label: '选项2'
        },
        {
          value: '选项3',
          label: '选项3'
        }
      ],
      value: '',
      input: '',
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalData: 0
    };
  },
  created() {
    for (let i = 0; i < 10; i++) {
      let obj = {
        id: i + 1,
        name: '张三',
        role: '普通员工',
        phone: '(406) 555-012' + i,
        other: '工作'
      };
      this.tableData.push(obj);
    }

    this.totalData = this.tableData.length || 0;
  },
  methods: {
    openFn() {
      this.$router.push({
        name: ''
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.user-manage-container {
  .operate-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .operate-box-left {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    .operate-box-right {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;

      .el-button {
        margin-left: 0;
      }
    }
  }

  .data-table-box {
    .edit-btn {
      color: var(--color-primary);
    }

    .delete-btn {
      color: #f56c6c;
    }

    .pagination-box {
      margin-top: 10px;
      font-size: 13px;
      text-align: right;
    }
  }
}
</style>
